<template>
  <div id="app">
    <div class="context">
      <div v-for="(row,x) in list" :key="x" class="list">
        <Item
          @a="click"
          v-for="(item,y) in row"
          :key="y"
          :x="x"
          :y="y"
          :item="item"
          :isAble="isAble"
        />
      </div>
    </div>
    <div :class="['player',current===1?'active':'']">
      <img :src="img1" alt>
      <div>玩家一</div>
      <div class="el-button1">
        <el-button type="danger" :disabled="!history.length" @click="hou">悔棋</el-button>
        <el-button type="primary" @click="start">new game</el-button>
      </div>
    </div>
    <div :class="['player',current===2?'active':'']">
      <img :src="img2" alt>
      <div>玩家2</div>
    </div>
  </div>
</template>

<script>
import { MessageBox } from "element-ui";
/* eslint-disable */
import img1 from "./assets/2020120319570927.jpg";
import img2 from "./assets/9737315e4f6a72e89a1e9ea4223fd34a.jpg";
import Item from "./components/item";
export default {
  name: "App",
  components: {
    Item
  },
  data() {
    return {
      list: [],
      current: 1,
      img1,
      img2,
      isAble: true,
      history: []
    };
  },
  methods: {
    click(x, y) {
      if (this.isAble === false) return;
      this.list[x].splice(y, 1, this.current);
      this.history.push([x, y]);
      const result = this.test(x, y);
      if (result) {
        MessageBox.confirm(
          `${this.current === 1 ? "黑棋" : "白棋"}胜`,
          "获胜",
          {
            confirmButtonText: "再来一局",
            cancelButtonText: "关掉弹窗",
            type: "info"
          }
        )
          .then(() => {
            this.start();
          })
          .catch(() => {
            this.isAble = false;
            this.current = this.current === 1 ? 2 : 1;
          });
      } else {
        this.current = this.current === 1 ? 2 : 1;
      }
    },
    test(x, y) {
      const a = this.testCross(x, y);
      const b = this.testCol(x, y);
      const c = this.testRight(x, y);
      const d = this.testLeft(x, y);
      const result = [a, b, c, d];
      return result.some(i => i === true);
    },
    // 测试行
    testCross(x, y) {
      let arr = [];
      let begin = y - 1;
      while (this.list[x][y] && this.list[x][y] === this.current) {
        arr.push(this.list[x][y]);
        y++;
      }
      while (this.list[x][begin] && this.list[x][begin] === this.current) {
        arr.push(this.list[x][begin]);
        begin--;
      }
      if (arr.length >= 5) return true;
    },
    // 测试列的
    testCol(x, y) {
      let arr = [];
      let begin = x - 1;
      while (this.list[x][y] && this.list[x][y] === this.current) {
        arr.push(this.list[x][y]);
        x++;
      }
      while (this.list[begin][y] && this.list[begin][y] === this.current) {
        arr.push(this.list[begin][y]);
        begin--;
      }
      if (arr.length >= 5) return true;
    },
    // 测试右斜方向
    testRight(x, y) {
      let arr = [];
      let beginx = x + 1;
      let beginy = y - 1;
      while (this.list[x][y] && this.list[x][y] === this.current) {
        arr.push(this.list[x][y]);
        y++;
        x--;
      }
      while (
        this.list[beginx][beginy] &&
        this.list[beginx][beginy] === this.current
      ) {
        arr.push(this.list[beginx][beginy]);
        beginy--;
        beginx++;
      }
      if (arr.length >= 5) return true;
    },
    // 测试左斜方向
    testLeft(x, y) {
      let arr = [];
      let beginx = x + 1;
      let beginy = y + 1;
      while (this.list[x][y] && this.list[x][y] === this.current) {
        arr.push(this.list[x][y]);
        y--;
        x--;
      }
      while (
        this.list[beginx][beginy] &&
        this.list[beginx][beginy] === this.current
      ) {
        arr.push(this.list[beginx][beginy]);
        beginy++;
        beginx++;
      }
      if (arr.length >= 5) return true;
    },
    // 初始化
    start() {
      const a = new Array(15);
      var b = Array.from(a, (v, k) => {
        return 0;
      });
      var c = Array.from(a, () => [...b]);
      this.list = c;
      this.isAble = true;
      this.current = 1;
    },
    // 悔棋操作
    hou() {
      const x = this.history[this.history.length - 1][0];
      const y = this.history[this.history.length - 1][1];
      this.list[x].splice(y, 1, 0);
      const list = [...this.list];
      this.current = this.current === 1 ? 2 : 1;
      this.history.pop();
      this.isAble = true;
    }
  },
  mounted() {
    this.start();
  }
};
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
.list {
  display: flex;
}
#app {
  position: relative;
  display: flex;
  padding-left: 300px;
  height: 455px;
  .context {
    background: #cccccc;
    height: 455px;
  }
  .player {
    position: relative;
    width: 150px;
    height: 250px;
    margin-top: 100px;
    margin-left: 100px;
    background: rgb(243, 243, 243);
    text-align: center;
    padding-top: 50px;
  }
  img {
    margin-bottom: 20px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
  .active {
    background: rgb(255, 106, 106);
    color: #ffffff;
  }
  .el-button1 {
    position: absolute;
    display: flex;
    bottom: -50px;
  }
}
</style>
